﻿@{
    ViewData["Title"] = "Home Page";
}
<script src="~/js/jquery-1.8.2.js"></script>
<script src="~/js/jquery-ui-1.8.23.min.js"></script>
<script src="~/js/Sortable-master/jquery.binding.js"></script>
<script src="~/js/Sortable-master/Sortable.js"></script>
<style>
    ul > li {
        width: calc(@(ViewBag.W)% - 5px);
        height: calc(@(ViewBag.H)% - 5px);
        margin-bottom: 5px;
        margin-left: 5px;
        float: left;
        list-style: none;
    }
    ul > li>img{
          width: 100%;
        height:100%;
    }
</style>
<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
<form action="/home/index" method="post">
    <div class="block__list block__list_word">
        <ul style="width:500px;height:250px;" id="advanced-1">
            @{
                var i = 0;
                foreach (var item in ViewBag.ImgList)
                {
                    <li value="@ViewBag.Ids[i]"><img src="data:image/png;base64,@(item)" /></li>
                    i++;

                }
            }
        </ul>
    </div>
    <input type="button" onclick="check()" value="验证" />
</form>

<script>
    var list = document.getElementById("advanced-1");
    Sortable.create(list, { group: "omega" });
    function check() {
        var arr=[];
        $("#advanced-1").children("li").each(function () {
            //console.log($(this).attr("value"))
            arr.push($(this).attr("value"))
        });
        //console.log(arr)
        $.ajax({
            url: "/home/CheckVerifcation",
            method: "POST",
            data: {arr:arr},
            success: function (data) {
                alert(data);
            }
        }); 
    }
</script>
